<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
    <link href="https://fonts.googleapis.com/css2?family=Arimo&family=Bebas+Neue&family=Inconsolata&display=swap"
        rel="stylesheet">
    <title>Redeye Record</title>
    <link rel="stylesheet" href="redeye.css">
    <script src="redeye.js"></script>
</head>

<body>

    <header>
        <!-- the first block of the website -->
        <section id='titles'>
            <h2><a href='index.html'>REDEYE</a></h2>
            <h3>DANCE MUSIC SPECIALISTS SINCE 1992
                <span id='hamburger' onclick="showHide('menu')">
                    <a href="javascript:void(0);"><i class="fa fa-bars"></i></a>
                </span>
            </h3>
        </section>

        <nav id='menu'>
            <ul>
                <li><a href='contact.html'>CONTACT</a></li>
                <li><a href='support.html'>SUPPORT</a></li>
                <li><a href='aboutus.html'>ABOUT US</a></li>
                <li><a href=''>MY ACCOUNT</a></li>
                <li><a href=''><i class='fa fa-search'></i></a></li>
                <li><a href='cart.html'><i class="fas fa-shopping-cart"></i></a></li>
            </ul>
        </nav>
    </header>

    <main>
        <!-- The navigation bar -->
        <section class="navigation-wrap" >
            <ul class='navigation'>
                <li><a href="">All</a></li>
                <li><a href="">Genre<i class="fas fa-caret-down"></i></a></li>
                <li><a href="">New Release<i class="fas fa-caret-down"></i></a></li>
                <li><a href="">Sale<i class="fas fa-caret-down"></i></a></li>
                <li class='last-item'><a href="">Pre-orders<i class="fas fa-caret-down"></i></a></li>
            </ul>
        </section>

        <!-- breadcrumb -->
        <ul class="breadcrumb">
            <li><a href="index.html">Home</a></li>
            <li>Contact</li>
        </ul>

        <!-- heading   -->
        <div class='container flex-box flex-wrap'>
            <div class="contact-img flex-1 flex-100 p1 m1">
                <img src="./images/1.jpg" class="product">
            </div>
            <div class='flex-1 flex-100 p1'>
                <h5>SHALL NOT FADE</h5>
                <p class="artist py1 border-b">Djoko</p>
                <h5 class="my1"> $26.00</h5>
                <p>Shall Not Fade, the second solo LP from Djoko, is the Rap & Hip-Hop album for February 2020. The album is here on neon yellow vinyl.</p>
                <div class="my3 flex-box">
                    <a href="cart.html" class="btn-blue" style="color: #fff;">Add to Cart</a>
                    <div class="flex count">
                        <div class="add">+</div>
                        <span>1</span>
                        <div class="reduce">-</div>
                    </div>
                </div>      
            </div>

        </div>

        <div class='container flex-box flex-wrap'>
            <div class='flex-1 flex-100 p1'>
                <h5 class="py1 border-b">TRACK LIST</h5>
                <h6 class="my1">LP1/Side A</h6>
                <p>
                1. Tasmanian Pain Coaster <br> 2. Smithereens <br>
                3. Up All night <br> 4. Dear Sirs 
                </p>
                <h6 class="my1">LP1/Side B</h6>
                <p>
                1. EMG <br>
                2. Run the Numbers<br>
                3. Stop Cryin<br>
                4. Drive</p>

            </div>
            <div class='flex-1 flex-100 p1'>
                <h5 class="py1 border-b">DETAIL</h5>
                <p class="my1">Trudging through the cityscape, dragging from a cigarette, contemplating everything. It’s another day in New York City, and no one will turn when they hear you scream. The voices in your head refuse to ceasefire. This is where Djoko calls home, and where Shall Not Fade renders the darkest thoughts in living colour. </p>
                <div class="flex align-items-center my3" style="color: #0069FF;"> 
                    <p>Show More </p>
                    <i class="fas fa-caret-down"></i>
                </div>
            </div>
        </div>

        <div class="p1" style="background: #658B6F">
            <h5 class="text-center m1" style="color: #fff;">YOU MAY ALSO BE INTERESTED IN ...</h5>
            <div class="container">
                <ul class='flex-box flex-wrap'>
                    <li class='wrap-product flex-1 flex-100 m1 p1'>
                        <img src='images/13.jpg'  class='product'>
                        <h6>ATOM & TOBIAS</h6>
                        <div class='flex-box'>
                            <section>
                            <div>Red Cloud</div>
                                <h6>$49</h6>
                            </section>
                            <section>
                                <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                            </section>
                        </div>
                    </li>
                    <li class='wrap-product flex-1 flex-100 m1 p1'>
                        <img src='images/15.jpg'  class='product'>
                        <h6>SKEE MASK</h6>
                        <div class='flex-box'>
                            <section>
                                <div>It Danza</div>
                                <h6>$57</h6>
                            </section>
                            <section>
                                <a href="cart.html" class='add-to-cart'>Add to Cart</a>
                            </section>
                        </div>
                    </li>
                    <li class='wrap-product flex-1 flex-100 m1 p1'>
                    <img src='images/29.jpg'  class='product'>
                    <h6>CALL ME</h6>
                    <div class='flex-box'>
                        <section>   
                        <div>Bileebob</div>
                            <h6>$92</h6>
                        </section>
                        <section>
                            <a  href="cart.html" class='add-to-cart'>Add to Cart</a>
                        </section>
                    </div>
                    </li>
                </ul>
            </div>
        </div>

    </main>


    <footer>
        <div class="container flex flex-wrap">
            <section class='words flex-1 flex-100'>
                <address>
                    Redeye Records Ltd., Unit 5,<br>
                    Cristal Business Centre, Knightsdale Rd,<br>
                    Ipswich IP1 4JJ<br>
                </address>
                <br><br>
                <strong>Copyright 2020 Redeye Record. A website by Eq.</strong>
            </section>
            <br>
            <section class='socials flex-1 flex-100'>
                <strong>Stay In Touch<strong>
                     <form action=''>
                         <input class="email" type="text" placeholder="Email Address">
                         <label class="email" for="email"><i class="fas fa-arrow-right"></i></label>
                         <br>
                         <input id="agree" type="checkbox">
                         <label for="agree">I agree to the privacy policy and terms and conditions.</label>
                     </form>
                     <p class='footer_icons'>
                         <i class="fab fa-facebook-f"></i>
                         <i class="fab fa-instagram"></i>
                         <i class="fab fa-twitter"></i>
                         <i class="fab fa-pinterest"></i>
                         <i class="fab fa-youtube"></i>
                         <i class="fa fa-envelope"></i>
                     </p>
            </section>
        </div>
    </footer>
</body>

</html>